<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/mycss.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
</head>

<body style="width: 100%;height: 100%;margin: 0;padding: 0;">
    <div class="nenghao_left">
        <div class="first_chart_area">
            <p style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">用能占指标比</p>
            <div id="yongneng" class="yongneng_chart">

            </div>
            <div id="yongneng2" class="yongneng_chart">

            </div>
            <div id="yongneng3" class="yongneng_chart">

            </div>
        </div>

        <div class="left_second_area">
            <h4 style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">用能占指标比</h4>
            <table style="border-collapse:collapse;text-align: center;">
                <thead>
                    <tr style="color: white;">
                        <th>时间</th>
                        <th>报警信息</th>
                        <th>报警等级</th>
                    </tr>
                </thead>

                <tbody>
                    <tr style="color: red;">
                        <td>07-12 10:29</td>
                        <td>报警一</td>
                        <td>严重</td>

                    </tr>
                    <tr style="color: yellow;">
                        <td>07-12 14:11</td>
                        <td>报警二</td>
                        <td>一般</td>

                    </tr>
                    <tr style="color: yellow;">
                        <td>07-12 15:01</td>
                        <td>报警三</td>
                        <td>一般</td>

                    </tr>
                    <tr style="color: orange;">
                        <td>07-12 17:41</td>
                        <td>报警四</td>
                        <td>中等</td>

                    </tr>


                </tbody>
            </table>
        </div>

    </div>

    <div class="nenghao_right">
        <div style="margin-left: 50px;margin-top: 40px;">
            <div id="right1" class="right_chart" style="height: 300px;background: #01132C;
            border: 2px solid #3C60B8;margin-top: -20px;"></div>
            <div id="right2" class="right_chart" style="top: 40%;background: #01132C;
            border: 2px solid #3C60B8;margin-top: 10px;"></div>
            <div id="right3" class="right_chart" style="top: 80%;background: #01132C;
            border: 2px solid #3C60B8;margin-top: 10px;"></div>
        </div>

    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            var yongnengDiv = document.getElementById('yongneng');
            var yongnengChart = echarts.init(yongnengDiv);
            var option;
            option = {
                color: ["#3987f8", "#01030e"],
                graphic: {
                    type: "text",
                    left: "center",
                    top: "47%",
                    style: {
                        text: "电\n\n73%",
                        textAlign: "center",
                        fill: "#3987f8",
                        fontSize: 10,
                        fontWeight: 700
                    }
                },
                series: [
                    {
                        name: '电',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '15',
                                fontWeight: 'bold'
                            }
                        },
                        data: [
                            { value: 73 },
                            { value: 27 },
                        ]
                    }
                ]
            };

            option && yongnengChart.setOption(option);



            var yongnengDiv2 = document.getElementById('yongneng2');
            var yongnengChart2 = echarts.init(yongnengDiv2);
            var option2;

            option2 = {
                color: ["#3987f8", "#01030e"],
                graphic: {
                    type: "text",
                    left: "center",
                    top: "47%",
                    style: {
                        text: "水\n\n73%",
                        textAlign: "center",
                        fill: "#3987f8",
                        fontSize: 10,
                        fontWeight: 700
                    }
                },
                series: [
                    {
                        name: '水',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '15',
                                fontWeight: 'bold'
                            }
                        },
                        data: [
                            { value: 73 },
                            { value: 27 },
                        ]
                    }
                ]
            };
            option && yongnengChart2.setOption(option2);

            var yongnengDiv3 = document.getElementById('yongneng3');
            var yongnengChart3 = echarts.init(yongnengDiv3);
            var option3;

            option3 = {
                color: ["#3987f8", "#01030e"],
                graphic: {
                    type: "text",
                    left: "center",
                    top: "47%",
                    style: {
                        text: "气\n\n73%",
                        textAlign: "center",
                        fill: "#3987f8",
                        fontSize: 10,
                        fontWeight: 700
                    }
                },
                series: [
                    {
                        name: '气',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '15',
                                fontWeight: 'bold'
                            }
                        },
                        data: [
                            { value: 73 },
                            { value: 23 },
                        ]
                    }
                ]
            };

            option && yongnengChart3.setOption(option3);

            var right1 = document.getElementById('right1');
            var right1Chart = echarts.init(right1);
            var option4;

            option4 = {
                title: {
                    text: '用能占指标比',
                    textStyle: {
                        color: '#fff'
                    },
                    left: '2%',
                    top: '2%'
                },
                legend: {
                    left: '22%', textStyle: {
                        color: '#fff'
                    },
                    top: '2%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '区域用气量',
                        type: 'bar',
                        data: [120, 130, 100, 130, 90, 230, 220, 110, 120, 100, 130, 90],
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#77E8F2'
                                }, {
                                    offset: 1,
                                    color: '#4075FF'
                                }]),
                            }
                        }
                    },
                    {
                        name: '用气指标',
                        type: 'line',
                        data: [100, 120, 90, 70, 100, 100, 100, 60, 90, 90, 80, 90],
                        itemStyle: {
                            color: '#fff'
                        }
                    }
                ], grid: {
                    bottom: '10%'
                }
            }

            option && right1Chart.setOption(option4);


            var right2 = document.getElementById('right2');
            var right2Chart = echarts.init(right2);
            var option5;

            option5 = {
                title: {
                    text: '用能占指标比',
                    textStyle: {
                        color: '#fff'
                    },
                    left: '2%',
                    top: '2%'
                },
                legend: {
                    left: '22%', textStyle: {
                        color: '#fff'
                    },
                    top: '2%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '区域用电量',
                        type: 'bar',
                        data: [120, 130, 100, 130, 90, 230, 220, 110, 120, 100, 130, 90],
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#FF3962'
                                }, {
                                    offset: 1,
                                    color: '#4075FF'
                                }]),
                            }
                        }
                    },
                    {
                        name: '用电指标',
                        type: 'line',
                        data: [100, 120, 90, 70, 100, 100, 100, 60, 90, 90, 80, 90],
                        itemStyle: {
                            color: '#fff'
                        }
                    }

                ], grid: {
                    bottom: '10%'
                }
            }

            option && right2Chart.setOption(option5);


            var right3 = document.getElementById('right3');
            var right3Chart = echarts.init(right3);
            var option6;

            option6 = {
                title: {
                    text: '用能占指标比',
                    textStyle: {
                        color: '#fff'
                    },
                    left: '2%',
                    top: '2%'
                },
                legend: {
                    left: '22%', textStyle: {
                        color: '#fff'
                    },
                    top: '2%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '区域用水量',
                        type: 'bar',
                        data: [120, 130, 100, 130, 90, 230, 220, 110, 120, 100, 130, 90],
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#FFF05F'
                                }, {
                                    offset: 1,
                                    color: '#4075FF'
                                }]),
                            }
                        }
                    },
                    {
                        name: '用水指标',
                        type: 'line',
                        data: [100, 120, 90, 70, 100, 100, 100, 60, 90, 90, 80, 90],
                        itemStyle: {
                            color: '#fff'
                        }
                    }

                ], grid: {
                    bottom: '10%'
                }
            }

            option && right3Chart.setOption(option6);
        })


    </script>
</body>

</html>